﻿<!DOCTYPE html>
<html>
<head>
  <title>Grid Layout</title>
  <!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
  <meta name="description" content="Interactive demonstration of layout-on-a-grid features by the GridLayout class." />
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="../release/go.js"></script>
  <script src="../assets/js/goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
  <script id="code">
    function init() {
      if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
      var $ = go.GraphObject.make;  // for conciseness in defining templates

      myDiagram =
        $(go.Diagram, "myDiagramDiv",  // must be the ID or reference to div
          {
            layout: $(go.GridLayout,
              { comparer: go.GridLayout.smartComparer })
            // other properties are set by the layout function, defined below
          });

      // define the Node template
      myDiagram.nodeTemplate =
        $(go.Node, "Spot",
          // make sure the Node.location is different from the Node.position
          { locationSpot: go.Spot.Center },
          new go.Binding("text", "text"),  // for sorting
          $(go.Shape, "Ellipse",
            {
              fill: "lightgray",
              stroke: null,
              desiredSize: new go.Size(30, 30)
            },
            new go.Binding("fill", "fill"),
            new go.Binding("desiredSize", "size")),
          $(go.TextBlock,
            // the default alignment is go.Spot.Center
            new go.Binding("text", "text"))
        );

      // create an array of data describing randomly colored and sized nodes
      var nodeDataArray = [];
      for (var i = 0; i < 100; i++) {
        nodeDataArray.push({
          key: i,
          text: i.toString(),
          fill: go.Brush.randomColor(),
          size: new go.Size(30 + Math.floor(Math.random() * 50), 30 + Math.floor(Math.random() * 50))
        });
      }

      // randomize the data
      for (i = 0; i < nodeDataArray.length; i++) {
        var swap = Math.floor(Math.random() * nodeDataArray.length);
        var temp = nodeDataArray[swap];
        nodeDataArray[swap] = nodeDataArray[i];
        nodeDataArray[i] = temp;
      }

      // create a Model that does not know about link or group relationships
      myDiagram.model = new go.Model(nodeDataArray);

      // layout using the latest parameters
      layout();
    }

    // Update the layout from the controls, and then perform the layout again
    function layout() {
      myDiagram.startTransaction("change Layout");
      var lay = myDiagram.layout;

      var wrappingColumn = document.getElementById("wrappingColumn").value;
      lay.wrappingColumn = parseFloat(wrappingColumn, 10);

      var wrappingWidth = document.getElementById("wrappingWidth").value;
      lay.wrappingWidth = parseFloat(wrappingWidth, 10);

      var cellSize = document.getElementById("cellSize").value;
      lay.cellSize = go.Size.parse(cellSize);

      var spacing = document.getElementById("spacing").value;
      lay.spacing = go.Size.parse(spacing);

      var alignment = getRadioValue("alignment");
      if (alignment === "Position") {
        lay.alignment = go.GridLayout.Position;
      } else {
        lay.alignment = go.GridLayout.Location;
      }

      var arrangement = getRadioValue("arrangement");
      if (arrangement === "LeftToRight") {
        lay.arrangement = go.GridLayout.LeftToRight;
      } else {
        lay.arrangement = go.GridLayout.RightToLeft;
      }

      var sorting = document.getElementById("sorting").value;
      switch (sorting) {
        default:
        case "Forward": lay.sorting = go.GridLayout.Forward; break;
        case "Reverse": lay.sorting = go.GridLayout.Reverse; break;
        case "Ascending": lay.sorting = go.GridLayout.Ascending; break;
        case "Descending": lay.sorting = go.GridLayout.Descending; break;
      }

      myDiagram.commitTransaction("change Layout");
    }

    function getRadioValue(name) {
      var radio = document.getElementsByName(name);
      for (var i = 0; i < radio.length; i++) {
        if (radio[i].checked) return radio[i].value;
      }
    }
  </script>
</head>
<body onload="init()">
<div id="sample">
  <div style="margin-bottom: 5px; padding: 5px; background-color: aliceblue">
    <span style="display: inline-block; vertical-align: top; padding: 5px">
      <b>GridLayout Properties</b>
      <br />
      Wrapping Column:
      <input type="text" size="3" id="wrappingColumn" value="NaN" onchange="layout()" />
      (NaN means there's no limit)
      <br />
      Wrapping Width:
      <input type="text" size="3" id="wrappingWidth" value="NaN" onchange="layout()" />
      (NaN means use the diagram's viewport width)
      <br />
      Cell Size:
      <input type="text" size="8" id="cellSize" value="NaN NaN" onchange="layout()" />
      (NaN x NaN means use a cell size big enough to hold any node)
      <br />
      Spacing:
      <input type="text" size="8" id="spacing" value="10 10" onchange="layout()" />
      (the minimum space between the nodes)
      <br />
      Alignment:
      <input type="radio" name="alignment" onclick="layout()" value="Position" /> Position
      <input type="radio" name="alignment" onclick="layout()" value="Location" checked="checked" /> Location
      <br />
      Arrangement:
      <input type="radio" name="arrangement" onclick="layout()" value="LeftToRight" checked="checked" /> LeftToRight
      <input type="radio" name="arrangement" onclick="layout()" value="RightToLeft" /> RightToLeft
      <br />
      Sorting:
      <select name="sorting" id="sorting" onchange="layout()">
        <option value="Forward" selected="selected">Forward</option>
        <option value="Reverse">Reverse</option>
        <option value="Ascending">Ascending</option>
        <option value="Descending">Descending</option>
      </select>
    </span>
  </div>
  <div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 100%; height: 500px"></div>
  <p>
    For information on <b>GridLayout</b> and its properties, see the <a>GridLayout</a> documentation page.
  </p>
</div>
</body>
</html>